<template>
    <el-dialog title="请选择用户标签" v-model="open" width="500">
        <div class="user-tag-type" v-for="item in userTagData" :key="item._id">
            <p class="title">{{ item.name }}</p>
            <el-checkbox-group v-model="checkedTag" size="small">
                <el-space :wrap="true" :size="10">
                    <el-checkbox-button v-for="tagItem in item.tags" :key="tagItem._id" :value="tagItem">
                        {{ tagItem.name }}
                    </el-checkbox-button>
                </el-space>
            </el-checkbox-group>
        </div>
        <template #footer>
            <el-button @click="open = false">取消</el-button>
            <el-button type="primary" @click="onConfirm">确认</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { findUserTagByTypeApi } from '@/api/userTag';
import { onMounted, ref } from 'vue';

const open = ref(false);
const userTagData = ref<any>([]);
const checkedTag = ref([])
const emit = defineEmits(['getCheckedUserTag'])

onMounted(() => {
    findUserTagByType();
})

// 确认
function onConfirm() {
    emit('getCheckedUserTag', checkedTag.value);
    open.value = false;
}

function openDialog() {
    open.value = true;
}

function findUserTagByType() {
    findUserTagByTypeApi()
        .then(res => {
            if (res.code == 200) {
                userTagData.value = res.data;
            }
        })
}

defineExpose({
    openDialog
})


</script>

<style lang="scss">
.user-tag-type {
    margin-bottom: 20px;

    .title {
        margin: 10px 0;
    }
}

.user-tag-type .el-checkbox-button__inner {
    border: none !important;
    background-color: #eee;
}
</style>